<!-- 146 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="ViewFeolWipForInput"
      :model="queryForm"
    >
      <a-row :gutter="[24, 0]">
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_productType')"
            name="productType"
            prop="productType"
            :rules="{
              required: true,
              message: $t('T9_productType'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.productType"
              class="select-width"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in productTypeArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('T9_ownerType')" name="ownerType">
            <a-select
              v-model:value="queryForm.ownerType"
              class="select-width"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in ownerTypeArr"
                :key="item.enumName"
                :value="item.enumName"
              >
                {{ item.enumName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('t9_owner')"
            name="owner"
            :rules="{
              required: true,
              message: $t('T9_owner'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.owner"
              class="select-width"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in ownerArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            class="flexDom"
            :label="$t('T9_tftProductSpec')"
            name="tftProductSpec"
            prop="tftProductSpec"
            :rules="{
              required: true,
              message: $t('T9_tftProductSpec'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.tftProductSpec"
              class="select-width flexlenmdo1"
              style="width: 70%"
              @change="changeTftProductSpec"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in tftProductSpecArr"
                :key="item.tftProductSpec"
                :value="item.tftProductSpec"
              >
                {{ item.tftProductSpec }}
              </a-select-option>
            </a-select>
            <a-input
              class="flexlenmdo2"
              v-model:value="queryForm.tftProductIdVersion"
              style="width: 25%; margin-left: 5%"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            class="flexDom"
            :label="$t('T9_cfProductSpec')"
            name="cfProductSpec"
            prop="cfProductSpec"
            :rules="{
              required: true,
              message: $t('T9_cfProductSpec'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.cfProductSpec"
              class="select-width"
              show-search
              allow-clear
              style="width: 70%"
              @change="changeCfProductSpec"
            >
              <a-select-option
                v-for="item in cfProductSpecArr"
                :key="item.cfProductSpec"
                :value="item.cfProductSpec"
              >
                {{ item.cfProductSpec }}
              </a-select-option>
            </a-select>
            <a-input
              class="flexlenmdo2"
              v-model:value="queryForm.cfProductIdVersion"
              style="width: 25%; margin-left: 5%"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <t-query-form
      layout="inline"
      ref="dataForm"
      group="ViewFeolWipForInput"
      :model="dataForm"
      style="margin-top: 20px"
    >
      <a-row :gutter="[24, 0]">
        <a-col :span="8">
          <a-form-item :label="$t('t9_tftQty')" name="tftQty">
            <a-input v-model:value="dataForm.tftQty" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('t9_cfQty')" name="cfQty">
            <a-input v-model:value="dataForm.cfQty" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('t9_differentQty')" name="differentQty">
            <a-input v-model:value="dataForm.differentQty" disabled />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_tftList")
      }}</a-col>
      <a-col :span="6" class="global-oper-row-extra">
        <a-button @click="exportExcel('tfList')">{{ $t("t9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div style="height:15vh">
<t-table :data="tftTable.data" max-height="100%">
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="cstId" :title="$t('T9_cstId')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="transferState" :title="$t('T9_transferState')" />
      <t-column field="eqId" :title="$t('T9_eqId')" />
      <t-column field="portId" :title="$t('T9_portId')" />
      <t-column field="glsQty" :title="$t('T9_glsQty')" />
    </t-table>
    </div>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cfList")
      }}</a-col>
      <a-col :span="6" class="global-oper-row-extra">
        <a-button @click="exportExcel('cfList')">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div style="height:15.5vh">
    <t-table :data="cfTable.data" max-height="100%">
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="cstId" :title="$t('T9_cstId')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="transferState" :title="$t('T9_transferState')" />
      <t-column field="eqId" :title="$t('T9_eqId')" />
      <t-column field="portId" :title="$t('T9_portId')" />
      <t-column field="glsQty" :title="$t('T9_glsQty')" />
    </t-table>
    </div>
    <t-query-form
      layout="inline"
      ref="dataForm"
      group="ViewFeolWipForInput"
      :model="dataForm"
      style="margin-top: 20px"
    >
      <a-row :gutter="[24, 0]">
        <a-col :span="8">
          <a-form-item :label="$t('t9_runTftPiiRejudgeNull')" name="tftQty">
            <a-input v-model:value="runTftPiiRejudgeNull" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('t9_2100RunCfPiiRejudgeNull')"
            name="differentQty"
          >
            <a-input v-model:value="runCfPiiRejudgeNull" disabled />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import {
    getProductType,
    getOwnerType,
    getTftProductSpec,
    getList,
    getOwnerId,
    getCfProductSpec
  } from '@/api/common'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'ViewFeolWipForInput',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        tftTable: [],
        cfTable: [],
        productTypeArr: [],
        ownerTypeArr: [],
        ownerArr: [],
        tftProductSpecArr: [],
        cfProductSpecArr: [],
        runTftPiiRejudgeNull: '',
        runCfPiiRejudgeNull: '',
        queryForm: {
          productType: '',
          ownerType: '',
          tftProductSpec: '',
          tftProductIdVersion: '',
          cfProductSpec: '',
          cfProductIdVersion: '',
          owner: ''
        },
        dataForm: {
          tftQty: '',
          cfQty: '',
          differentQty: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductType()
      this.getOwnerType()
      this.getOwner()
      this.getTftProductSpec()
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = dates
        console.log('Selected Time: ', this.queryForm.Date[0])
      },
      changeTftProductSpec(value) {
        this.tftProductSpecArr.forEach((item) => {
          if (item.tftProductSpec === value) {
            this.queryForm.tftProductIdVersion = item.tftProductIdVersion
          }
        })
        const params = {
          tftProductSpec: this.queryForm.tftProductSpec,
          tftProductSpecVersion: this.queryForm.tftProductIdVersion
        }
        getCfProductSpec(params).then((res) => {
          this.cfProductSpecArr = res
          this.dataForm.cfProductSpec = this.cfProductSpecArr.cfProductSpec
          this.dataForm.cfProductIdVersion = this.cfProductSpecArr.cfProductSpecVersion
        })
      },
      changeCfProductSpec(value) {
        this.cfProductSpecArr.forEach((item) => {
          if (item.cfProductSpec === value) {
            this.queryForm.cfProductIdVersion = item.cfProductSpecVersion
          }
        })
      },
      getList() {
        const obj = {
          dtoName: 'TFTListDTO',
          owner: this.queryForm.owner,
          ownerType: this.queryForm.ownerType,
          productType: this.queryForm.productType,
          productId: this.queryForm.tftProductSpec,
          productVersion: this.queryForm.tftProductIdVersion,
          export: false,
          queryId: 'GetSumLotListByOperation',
          version: '80005',
          menuName: 'viewFeolWipInput',
          usage: 'queryTFTList'
        }
        const params = {
          dtoName: 'TFTListDTO',
          owner: this.queryForm.owner,
          ownerType: this.queryForm.ownerType,
          productType: this.queryForm.productType,
          productId: this.queryForm.cfProductSpec,
          productVersion: this.queryForm.cfProductIdVersion,
          export: false,
          queryId: 'GetSumLotListByOperation',
          version: '80005',
          menuName: 'viewFeolWipInput',
          usage: 'queryCFList'
        }
        getList(obj).then((res) => {
          this.tftTable = res
        })
        getList(params).then((res) => {
          this.cfTable = res
        })
      },
      exportExcel(type) {
        const obj = {
          dtoName: 'TFTListDTO',
          owner: this.queryForm.owner,
          ownerType: this.queryForm.ownerType,
          productType: this.queryForm.productType,
          productId: this.queryForm.tftProductSpec,
          productVersion: this.queryForm.tftProductIdVersion,
          export: true,
          queryId: 'GetSumLotListByOperation',
          version: '80005',
          menuName: 'viewFeolWipInput',
          usage: 'queryTFTList'
        }
        const params = {
          dtoName: 'TFTListDTO',
          owner: this.queryForm.owner,
          ownerType: this.queryForm.ownerType,
          productType: this.queryForm.productType,
          productId: this.queryForm.cfProductSpec,
          productVersion: this.queryForm.cfProductIdVersion,
          export: true,
          queryId: 'GetSumLotListByOperation',
          version: '80005',
          menuName: 'viewFeolWipInput',
          usage: 'queryCFList'
        }
        if (type === 'tftList') {
          getList(obj).then((res) => {
            downloadBlobFile(res, 'tftList')
          })
        } else {
          getList(params).then((res) => {
            downloadBlobFile(res, 'cfList')
          })
        }
      },
      getProductType() {
        getProductType().then((res) => {
          this.productTypeArr = res
        })
      },
      getOwnerType() {
        getOwnerType().then((res) => {
          this.ownerTypeArr = res
        })
      },
      getOwner() {
        const params = {
          ownerType: 'OwnerD',
          shopId: 'CELL'
        }
        getOwnerId(params).then((res) => {
          this.ownerArr = res
        })
      },
      getTftProductSpec() {
        getTftProductSpec().then((res) => {
          this.tftProductSpecArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
</style>
